import React, { Component } from 'react'
import img1 from '../images/21_03.jpg'
import './rangeList.css/index.css'
import img2 from '../images/1.jpg'
import { getRangeList, getRangeList2 } from '../../api/index'
import { Flex } from 'antd-mobile';



class RangeList extends Component {
    constructor() {
        super()
        this.state = {
            arr: [],
            arr1: []
        }
    }
    componentDidMount() {
        getRangeList().then(res => {
            // console.log(res)
            this.setState({
                arr: res.data.list
            })
        })
        getRangeList2().then(res => {
            console.log(res)
        })
    }
    go(id){
        this.props.history.push('/newSing',{id:id})
    }
    change(){
        this.props.history.push('/find')
    }
    render() {
        // console.log(this.state.arr)
        return (
            <div className='rangelist'>
                <img src={img1} alt="" className='rangelist-img1' onClick={this.change.bind(this)}/>
                <h2>排行榜</h2>
                <div className='rangelist-one'>
                    <h3>官方榜</h3>
                    {this.state.arr.map((item, index) => {
                        return (
                            <Flex key={index} className='rangelist-one-1' onClick={this.go.bind(this,item.id)}>
                                <Flex.Item >
                                    <img src={item.coverImgUrl} alt="" />
                                    <span>{item.name}</span>
                                    <h5>{item.updateFrequency}</h5>
                                </Flex.Item>
                            </Flex  >
                        )
                    })}
                </div>

            </div>
        )
    }
}

export default RangeList